<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 针对移动端的自适应
			 加上 ：maximum-scale=1.0,user-scalable=no，之后就会禁止缩放
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>BootStrap-01</title>

		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
	
	</head>
	<body>
		<h1>1.容器（Container）</h1>
		<div class="container">容器（Container）容器（Container）容器（Container）</div>
		
		<h1>2.网格(Grid)</h1>
		<blockquote>
		<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
			这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演
			示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体
			副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
		</blockquote><p>
		<pre>
			代码块代码块代码块代码块代码块
			代码块代码块代码块代码块代码块
		</pre>
	
		<h1>3-表格布局</h1>
		<h2>3.1-一般表格布局</h2>
		<table class="table">
			<caption><strog>1-一般表格布局</strog></caption>
			<tr bgcolor="#CE8483"><th>标题1</th><th>标题2</th><th>标题3</th></tr>
			<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
			<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
		</table>
		
		<h2>3.2-条纹表格布局</h2>
		<table class="table table-striped">
		   <caption>2-条纹表格布局</caption>
		   <thead>
		      <tr><th>名称</th><th>城市</th><th>密码</th></tr>
		   </thead>
		   <tbody>
		      <tr><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr>
		      <tr><td>Sachin</td><td>Mumbai</td><td>400003</td></tr>
		      <tr><td>Uma</td><td>Pune</td><td>411027</td></tr>
		   </tbody>
		</table>

		<h2>3.3-边框表格布局</h2>
		<table class="table table-bordered">
			<caption>3-边框表格布局</caption>
			<thead>
				<tr><th>名称</th><th>城市</th><th>密码</th></tr>
			</thead>
			<tbody>
				<tr><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr>
				<tr><td>Sachin</td><td>Mumbai</td><td>400003</td></tr>
				<tr><td>Uma</td><td>Pune</td><td>411027</td></tr>
			</tbody>
		</table>
		
		<h2>3.4-悬停表格布局</h2>
		<table class="table table-hover">
   			<caption>悬停表格布局</caption>
			<thead>
				<tr><th>名称</th><th>城市</th><th>密码</th></tr>
			</thead>
			<tbody>
				<tr><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr>
				<tr><td>Sachin</td><td>Mumbai</td><td>400003</td></tr>
				<tr><td>Uma</td><td>Pune</td><td>411027</td></tr>
			</tbody>
		</table>

		<h2>3.5-精简表格布局</h2>
		<table class="table table-condensed">
		    <caption>精简表格布局</caption>
			<thead>
				<tr><th>名称</th><th>城市</th><th>密码</th></tr>
			</thead>
			<tbody>
				<tr><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr>
				<tr><td>Sachin</td><td>Mumbai</td><td>400003</td></tr>
				<tr><td>Uma</td><td>Pune</td><td>411027</td></tr>
			</tbody>
		</table>
		
		
		<h2>3.6-上下文表格布局</h2>
		<table class="table">
		    <caption>上下文表格布局</caption>
			<thead>
				<tr class="active"><th>名称</th><th>城市</th><th>密码</th></tr>
			</thead>
			<tbody>
				<tr class="success"><td>Tanmay</td><td>Bangalore</td><td>560001</td></tr>
				<tr class="warning"><td>Sachin</td><td>Mumbai</td><td>400003</td></tr>
				<tr class="danger"><td>Uma</td><td>Pune</td><td>411027</td></tr>
			</tbody>
		</table>
		
		
		<h2>3.7-响应式表格</h2>
		<p>通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。
			当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别</p>
		<!-- 响应式的包裹class的div -->
		<div class="table-responsive">
			<table class="table">
				<caption><strog>1-一般表格布局,加上响应式表格class</strog></caption>
				<tr bgcolor="#CE8483"><th>标题1</th><th>标题2</th><th>标题3</th></tr>
				<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
				<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
			</table>		
		</div>
		
	</body>
</html>
